<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市选择</title>
    <style>
        .city-buttons button {
            background-color: #98FB98;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }

        .operation-buttons button {
            margin-bottom: 10px;
            width: 300px;
        }
    </style>
</head>
<body>

<div id="city" style="border: 1px solid #ccc; padding: 20px; width: 320px;">
    <p>你喜欢哪个城市？</p>
    <div class="city-buttons">
        <button id="bj">北京</button>
        <button>上海</button>
        <button>东京</button>
        <button>首尔</button>
    </div>
</div>

<div class="operation-buttons" style="margin-left: 400px;">
    <button onclick="createGuangzhou()">创建一个"广州"节点，添加到#city下</button>
    <br><br>
    <button onclick="insertBeforeGuangzhou()">将"广州"节点插入到#bj前面</button>
    <br><br>
    <button onclick="replaceBeijingWithGuangzhou()">使用"广州"节点替换#bj节点</button>
    <br><br>
    <button onclick="deleteBeijing()">删除#bj节点</button>
    <br><br>
    <button onclick="readCityHTML()">读取#city内的HTML代码</button>
    <br><br>
    <button onclick="setBeijingHTML()">设置#bj内的HTML代码</button>
</div>
</body>
<script>
    // 创建一个"广州"节点，添加到#city下
    function createGuangzhou() {
        var guangzhou = document.createElement("button");
        guangzhou.textContent = "广州"; //textContent: 设置或返回元素的内容。
        // guangzhou.innerHTML = "广州"; //innerHTML: 获取或设置当前元素及其子元素的 HTML 源代码。
        var city = document.querySelector("#city .city-buttons").appendChild(guangzhou)
    }


    /**
     *  将"广州"节点插入到#bj前面，方法一：
     *  insertBefore:
     *  - 语法：父节点.insertBefore(要插入的节点,参考节点)
     */
    // function insertBeforeGuangzhou(){
    //     var guangzhou = document.createElement("button");
    //     guangzhou.innerHTML = "广州";
    //     var beijing = document.getElementById("bj");
    //     beijing.parentNode.insertBefore(guangzhou, beijing)
    // }

    /**
     * 方法二：
     */
    function insertBeforeGuangzhou() {
        var guangzhou = document.createElement("button");
        var text = document.createTextNode("广州");
        guangzhou.appendChild(text)
        var beijing = document.getElementById("bj")
        beijing.parentNode.insertBefore(guangzhou, beijing)
    }

    /**
     * 使用广州节点替换北京节点
     */
    // function replaceBeijingWithGuangzhou(){
    //     var guangzhou = document.createElement("button");
    //     var text = document.createTextNode("广州");
    //     guangzhou.appendChild(text)
    //     var beijing = document.getElementById("bj");
    //     // replaceChild：将一个节点替换为另一个节点
    //     beijing.parentNode.replaceChild(guangzhou, beijing)
    // }


    /**
     * 方法二：
     */
    function replaceBeijingWithGuangzhou() {
        var guangzhou = document.createElement("button");
        guangzhou.innerHTML = "广州";
        var beijing = document.getElementById("bj")
        beijing.parentNode.replaceChild(guangzhou, beijing)
    }


    /**
     * 删除北京节点
     */
    // function deleteBeijing(){
    //     var beijing = document.getElementById("bj");
    //     beijing.parentNode.removeChild(beijing)
    // }

    /**
     * 删除北京节点
     */
    function deleteBeijing() {
        const bjObj = document.querySelector("#bj");
        if (bjObj) {
            bjObj.remove()
        }
    }

    /**
     * 读取#city内的HTML代码
     */
    function readCityHTML() {
        var city = document.querySelector("#city");
        alert(city.innerHTML)
    }

    /**
     * 读取#bj内的HTML代码
     */
    function setBeijingHTML() {
        var beijing = document.querySelector("#bj");
        beijing.innerHTML = "北平"
    }


</script>
</html>
